import React, { memo } from 'react'
import type { ReactNode } from 'react'
import { HeaderWrapper, HeaderLeft, HeaderRight } from './style'
import { useState } from 'react'
import SongsCategory from '../songs-category'
import type { NotificationArgsProps } from 'antd'
import { notification} from 'antd';
import { useAppSelector } from '@/store'

interface IProps {
  children?: ReactNode
}

const SongsHeader: React.FC<IProps> = () => {
  const [showCategory, setShowCategory] = useState(false)
  const { currentCategory } = useAppSelector((state) => ({
    currentCategory: state.songs.currentCategory as string
  }))
  const changeShowCategory = () => {
    setShowCategory(!showCategory)
    console.log(showCategory)
  }

  type NotificationPlacement = NotificationArgsProps['placement']
  const [api, contextHolder] = notification.useNotification()

  const openNotification = (placement: NotificationPlacement) => {
    api.info({
      message: `热门分类`,
      description:'功能开发中',
      placement
    })
  }
  return (
    <HeaderWrapper>
      {contextHolder}
      <HeaderLeft>
        <div className="title">{currentCategory}</div>
        <button
          className="select"
          onClick={() => {
            changeShowCategory()
          }}
        >
          <span>选择分类</span>
          <i className="sprite_icon2"></i>
          {showCategory && <SongsCategory></SongsCategory>}
        </button>
      </HeaderLeft>
      <HeaderRight>
        <button className="hot" onClick={() => openNotification('topRight')}>
          热门
        </button>
      </HeaderRight>
    </HeaderWrapper>
  )
}

export default memo(SongsHeader)
